<html>
	<head>
		<title>Contact Us</title>
		<link rel="stylesheet" type="text/css" href="css/contactus.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
		<script src="jquery-git2.js"></script>		
		<style type="text/css">
		.hidden{
			 visibility: hidden;
		}
		.active{
			visibility: visible; 
			color: "red";
		}
	

		</style>
	</head>
	<body>
		
	<div class="container">
		<section class="main_header">
			<h1>Contact Us</h1>
		</section>
		<section class="left_right">
			<div class="left"><h2 class="left">GET IT TOUCH</h2></div>
			<div class="right"><h2 class="right">SEND US A MESSAGE</h2></div>
		</section>
		<!--<section>
			<div class="msg_sent" id="msg_sent" >Message Sent ...Thanks for your comment !</div>
		</section>-->
		<section class="left_section">
				<div class="address">
				ITI- Head Quarter
				Smart Village<br/>28 Km by Cairo / Alexandria Desert Road <br/>6 October - Building B148<br/>
				Tel: +202-353-55656<br/>
				</div>
				<div class="map">
					<!--<p><button onclick="geoFindMe()" class="btn btn-info" >Show my location</button></p>
					<div id="locate"></div>-->
					<iframe width="500" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
						src="https://maps.google.com/maps?f=d&amp;source=s_d&amp;saddr=iti-smartvillage&amp;
						daddr=Cairo,+Cairo+Governorate,+Egypt&amp;hl=en&amp;
						geocode=FabYygEdgFjZASFZ-UR8Ap3yiCnZHX2bl1tYFDFZ-UR8Ap3yiA%	   	  							3BFQRxygEdgJ7cASnrviELpj9YFDG6O0LolrLfeQ&amp;
						aq=&amp;sll=29.957314,30.915527&amp;sspn=0.644878,1.352692&amp;
						t=h&amp;mra=ls&amp;ie=UTF8&amp;ll=30.057803,31.126328&amp;
						spn=0.148576,0.240326&amp;z=12&amp;output=embed">
					</iframe><br/>
					<small><a href="https://maps.google.com/maps?f=d&amp;source=embed&amp;saddr=iti-smartvillage&amp;
						daddr=Cairo,+Cairo+Governorate,+Egypt&amp;
						hl=en&amp;geocode=FabYygEdgFjZASFZ-UR8Ap3yiCnZHX2bl1tYFDFZ-UR8Ap3yiA%
						3BFQRxygEdgJ7cASnrviELpj9YFDG6O0LolrLfeQ&amp;aq=&amp;sll=29.957314,30.915527&amp;
						sspn=0.644878,1.352692&amp;t=h&amp;mra=ls&amp;
						ie=UTF8&amp;ll=30.057803,31.126328&amp;spn=0.148576,0.240326&amp;z=12" style="color:#cc0000;text-align:left;
						font-weight:bold" target="_blank">
						View Larger Map</a></small><br/>
						<form action="http://maps.google.com/maps" method="get" target="_blank">
						<br/>
   						<label for="saddr" >Enter your location to know the directions :</label>
   						<input type="text" name="saddr" />
   						<input type="hidden" name="daddr" value="Smart Village, Smart Village, القرية الذكية، Abou Rawash, Giza, Egypt" />
   						<input type="submit" value="Get directions" class="btn btn-danger"/>
						</form>
				</div>
		</section>
		<section class="right_section">
			<div id="contact_form">
    					<form class="form-horizontal" role="form">
      						<div class="form-group row">
							<label for="inputName" class="col-sm-2 control-label">Name</label>
        						<div  class="col-sm-offset-2 col-sm-10">
      								<input type="text" class="form-control" id="inputName" placeholder="Your Name" 
      								autofocus  >
    							</div>
        						<span  id="name_warning" class="hidden"  >Please enter your name*</span>
      						</div>

      						<div class="form-group row">
							<label for="inputEmail" class="col-sm-2 control-label">Email</label>
        						<div  class="col-sm-offset-2 col-sm-10">
      						  		<input type="email" class="form-control" id="inputEmail" placeholder="Your Email" autofocus>
  	  							</div>
        						<span  id="email_warning" class="hidden" >Please enter a valid e-mail address*</span>
      						</div>

						<div class="form-group row">
							<label for="inputSubject" class="col-sm-2 control-label">Subject</label>
							<div  class="col-sm-offset-2 col-sm-10">
								<select class="form-control" id="inputSubject" autofocus>
						 			<option>...Select...</option>
						 			<option>Ask a question</option>
						 			<option>Leave a comment</option>
						 			<option>Other</option>
								</select>
							</div>
							<span  id="subject_warning" class="hidden" >Please select the subject*</span>
						</div>

      						<div class="form-group row">
							<label for="inputMessage" class="col-sm-2 control-label">Message</label>
        						<div  class="col-sm-offset-2 col-sm-10">
	                     				  <textarea class="form-control" rows="12" id="inputArea" placeholder="Your Message" autofocus>
	                     				  </textarea>
						    	</div>	
	        					<span  id="message_warning" class="hidden">Please write a message*</span>
	      					</div>

						<div class="form-group">     	 					
							<div class="col-sm-offset-2 col-sm-10">
							      <input type="submit" value="Submit" id="submit" class="btn btn-danger" style="margin-top: 50px;" />
							</div>
						</div>
    				        </form>
			</div>

		</section>
	</div>
	<script src="js/myJS.js"></script>
	
	</body>
<html>
